<template>
  <div class="Information" v-if="isUpdate">
    <myHeader title="编辑部门信息"/>
    <Search/>
    <div class="table">
      <el-table
        :data="tableData"
        border
        stripe
        style="width:94%;margin:auto;"
        :default-sort = "{prop: 'date', order: 'descending'}"
        >
        <el-table-column
          prop="did"
          label="部门ID"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="dname"
          label="部门名称"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="dparentName"
          label="上级部门"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="dadimin"
          label="部门负责人"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="dphone"
          label="负责人电话"
          sortable
          min-width="100">
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="100">
          <template>
            <el-button @click="modifyClick" type="text" size="small">修改</el-button>
            <el-button @click="deleteClick" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Paging :pageSum="pageSum" :total="total"/>
  </div>
</template>

<script>
  import myHeader from '@/components/myHeader/myHeader.vue'
  import Search from '@/components/Search/Search.vue'
  import Paging from '@/components/Paging/Paging.vue'
  import {mapState} from 'vuex'
  export default {
    name:'Information',
    components: {
      myHeader,
      Search,
      Paging
    },
    data() {
      return {
        tableData: [],
        pageSum: 0,
        limit: 10,
        page: 1,
        total: 0,
        isUpdate: true
      }
    },
    mounted () {
      document.body.style.backgroundColor="rgb(243,243,244)";
      this.getInfo(this.limit,this.page)
    },
    beforeDestroy () {
      this.changePage = 1
      this.changeLimit = 10
      this.inputValue = ''
    },
    methods: {
      //请求页面数据函数
      getInfo(limit,page){
        // console.log(limit,page)
        this.$axios.get('http://132.232.110.185/personnelManagement/department/showDepartment/'+page+'/'+limit).then(
          response => {
          // console.log('数据请求成功');
          this.tableData = response.data.data;
          this.total = response.data.count
          this.pageSum = Math.ceil(this.total / this.limit)
          if(response.data.data.length == 0) {
            this.changePage -= 1
          }
        },//成功回调
        error => {
          console.log('数据请求失败');
          console.log(error);
        }//失败回调
        )
      },
      //搜索查询函数
      searchInfo(keyword){
        if(keyword == '') {
          this.getInfo(this.limit,this.page)
        }else{
          this.page = 1
          this.changePage = 1
          this.$axios({
            url:`http://132.232.110.185/personnelManagement/department/showDepartmentByName/${keyword}/${this.page}/${this.limit}`,
            method:'GET'
          }).then(
            response => {
              // console.log('数据查询成功')
              this.tableData = response.data.data
              this.total = response.data.count
              this.pageSum = Math.ceil(this.total / this.limit)
            },
            error => {
              console.log('数据查询失败');
              console.log(error)
            }
          )
        }
      },
      modifyClick(e) {
        let dId = e.target.parentNode.parentNode.parentNode.parentNode.firstChild.firstChild.innerText
        this.tableData.forEach(element => {
          if(element.did == dId){
            if(element.dparentId == 0) {
              this.$router.push({
                name:'ModifyInfoFirst',
                params:{
                  dId: dId
                }
              })
            }else if(element.dparentId == 1){
              this.$router.push({
                name:'ModifyInfoSecond',
                params:{
                  dId: dId
                }
              })
            }else if(element.dparentId == 2){
              this.$router.push({
                name:'ModifyInfoThird',
                params:{
                  dId: dId
                }
              })
            }
          }
        });
      },
      deleteClick(e) {
        let dId  = e.target.parentNode.parentNode.parentNode.parentNode.firstChild.firstChild.innerText
        this.$axios({
          url:`http://132.232.110.185/personnelManagement/department/deletDepartment/${dId }`,
          method: 'GET'
        }).then(
        response => {
          // console.log('删除成功');
          alert(response.data.msg)
          this.isUpdate = false
          this.$nextTick(()=>{
            this.isUpdate = true
          })
        },
        error => {
          console.log('删除失败');
          console.log(error)
        })
      }
    },
    computed: {
      ...mapState('Information',['changeLimit','changePage','inputValue']),
      changePage:{
        get(){
          return this.$store.state.Information.changePage
        },
        set(val){
          return this.$store.state.Information.changePage = val
        }
      },
      changeLimit:{
        get(){
          return this.$store.state.Information.changeLimit
        },
        set(val){
          return this.$store.state.Information.changeLimit = val
        }
      },
      inputValue:{
        get(){
          return this.$store.state.Information.inputValue
        },
        set(val){
          return this.$store.state.Information.inputValue = val
        }
      }
    },
    watch: {
      changeLimit(newLimit){
        this.limit = newLimit
        this.getInfo(this.limit,this.page)
      },
      changePage(newPage){
        this.page = newPage
        this.getInfo(this.limit,this.page)
      },
      inputValue(newValue){
        this.searchInfo(newValue)
      }
    }
  }
</script>

<style scoped>
  .Information{
    width: 96%;
    margin: auto;
    background-color: white;
    overflow: hidden;
    padding-bottom: 50px;
  }
</style>